<template>
  <view
    class="he-page-content"
    :data-theme="theme"
    :class="loading ? 'flex justify-center align-center' : ''"
  >
    <he-loading size="50" mode="flower" v-if="loading"></he-loading>
    <template v-else>
      <view class="he-header">
        <view class="flex justify-center he-header__top">
          <image
            class="he-image"
            :src="ipAddress + '/success-image-order.png'"
          ></image>
          <view class="flex flex-direction justify-center he-text">
            <view class="he-title">订单支付成功</view>
            <view class="he-total">￥{{ totalAmount }}</view>
          </view>
        </view>
        <view class="he-header__bottom flex justify-center">
          <button class="cu-btn" @click="switchTab">返回首页</button>
          <button
            class="cu-btn"
            @click="redirectTo('/pages/order/detail?id=' + orderId)"
          >
            查看详情
          </button>
        </view>
        <view class="he-coupon" v-if="!$h.test.isEmpty(coupon)">
          <view class="he-coupon-head">
            <image
              class="he-coupon-head-img"
              :src="ipAddress + '/coupon-star-successful.png'"
            />
            <text class="he-coupon-head-text">恭喜！获得优惠券</text>
          </view>
          <scroll-view scroll-y class="he-coupon-body">
            <view
              class="he-coupon-item flex"
              v-for="(item, index) in coupon"
              :key="index"
            >
              <view class="he-coupon-left">
                <view class="he-item-price">{{
                  item.coupon.sub_price | setNumber
                }}</view>
                <view class="he-item-condition">
                  <template v-if="Number(item.coupon.min_price) > 0">
                    满{{ item.coupon.min_price | setNumber }}可用
                  </template>
                  <template v-else> 无门槛 </template>
                </view>
              </view>
              <view class="he-coupon-center">
                <view class="he-coupon-doc"></view>
                <view class="he-coupon-doc"></view>
                <view class="he-border-line" :style="[lineColor]"></view>
              </view>
              <view class="he-coupon-right flex">
                <view class="he-right-left">
                  <view class="he-item-name">{{ item.coupon.name }}</view>
                  <view class="he-item-prompt">{{
                    item.coupon.appoint_type === 1
                      ? "全部商品可用"
                      : "部分商品可用"
                  }}</view>
                </view>
                <view class="he-right-right flex align-center justify-center">
                  <button
                    class="cu-btn he-cu-btn he-right-right_btn"
                    @click="redirectTo('/pages/goods/search-list?coupon_id=' + item.coupon_id)"
                  >
                    去使用
                  </button>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
      <view
        class="he-goods-list"
        :style="[goodsStyle]"
        v-if="goodsSetting.recommend_showpage.pay_success.value"
      >
        <he-products-featured></he-products-featured>
      </view>
    </template>
  </view>
</template>

<script>
import heProductsFeatured from "@/components/he-products-featured.vue";
import heLoading from "../../components/he-loading.vue";
import { mapGetters } from "vuex";

export default {
  name: "successful",
  components: {
    heProductsFeatured,
    heLoading,
  },
  data() {
    return {
      totalAmount: 0,
      orderId: null,
      coupon: [],
      loading: true,
    };
  },
  computed: {
    ...mapGetters("setting", {
      goodsSetting: "goodsSetting",
    }),
    lineColor: function () {
      return {
        backgroundImage: `linear-gradient(to bottom, ${this.themeColor} 0%, ${this.themeColor} 50%, transparent 0%)`,
      };
    },
    goodsStyle: function () {
      let style = {
        borderRadius: "16rpx 16rpx 0 0",
      };
      if (!this.$h.test.isEmpty(this.coupon)) {
        style.borderRadius = "0";
      }
      return style;
    },
  },
  onLoad(options) {
    this.orderId = options.order_id;
    let _this = this;
    Promise.all([
      this.getOrder(parseInt(options.order_id)),
      this.getCoupon(options.order_sn),
    ])
      .then(function () {
        _this.loading = false;
      })
      .catch(function () {
        _this.loading = false;
      });
  },
  methods: {
    switchTab: function () {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    redirectTo: function (url) {
      uni.redirectTo({
        url,
      });
    },
    getOrder: function (id) {
      let _this = this;
      return new Promise(function (resolve, reject) {
        _this.$heshop
          .order("get", id)
          .then(function (res) {
            _this.totalAmount = res.pay_amount;
            resolve();
          })
          .catch(function (error) {
            _this.$toError(error);
            reject();
          });
      });
    },
    // 获取购买商品获得的优惠券
    getCoupon: function (order_sn) {
      let _this = this;
      return new Promise(function (resolve, reject) {
        _this.$heshop
          .coupon("get", {
            status: 0, // 默认可用
            behavior: "user", // 用户自己的
            type: "all", // 全部无分页
            order_sn, //订单编号
          })
          .then(function (response) {
            _this.coupon = response;
            resolve();
          })
          .catch(function (error) {
            _this.$toError(error);
            reject();
          });
      });
    },
  },
  filters: {
    setNumber: function (num) {
      return Number(num);
    },
  },
};
</script>

<style scoped lang="scss">
.he-page-content {
  background-color: #ffffff;
  overflow: hidden;
}

.he-header {
  width: 750px;
  background: #ffffff;
  padding: 0 20px;
}

.he-image {
  width: 156px;
  height: 156px;
  display: block;
  margin-right: 24px;
}

.he-text {
  margin-left: 24px;
}

.he-title {
  font-size: 36px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #222222;
  line-height: 1.3;
  margin-bottom: 5px;
}

.he-total {
  font-size: 32px;
  font-family: DINPro;
  font-weight: bold;
  @include font_color("font_color");
  line-height: 1.3;
  margin-top: 5px;
}

.he-header__top {
  margin-top: 56px;
}
.he-header__bottom {
  margin-top: 48px;
  margin-bottom: 56px;
}
.he-coupon {
  width: 710px;
  max-height: 556px;
  background: #fdf5e1;
  border-radius: 16px;
  margin: 0 0 32px 0;
  padding-top: 20px;
  overflow: hidden;
}
.he-coupon-head {
  height: 56px;
  position: relative;
}
.he-coupon-head-text {
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #6b3713;
  z-index: 10;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.he-coupon-head-img {
  width: 100%;
  height: 56px;
  display: block;
}
.he-coupon-body {
  max-height: 452px;
  padding: 12px 20px 0px 20px;
  margin-bottom: 28px;
  overflow: hidden;
  .he-coupon-item {
    height: 160px;
    background: #ffffff;
    margin-bottom: 16px;
    border-radius: 16px;
    .he-coupon-left {
      width: 217px;
      border-top: 2px solid transparent;
      border-left: 2px solid transparent;
      border-bottom: 2px solid transparent;
      border-top-left-radius: 16px;
      border-bottom-left-radius: 16px;
      @include border_color("border_color");
      padding: 37px 0 35px 16px;
      text-align: center;
      .he-item-price {
        line-height: 52px;
        font-size: 50px;
        font-family: DIN-Bold;
        font-weight: Bold;
        @include font_color("font_color");
      }
      .he-item-price:before {
        content: "￥";
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 500;
        @include font_color("font_color");
        line-height: 14px;
      }
      .he-item-condition {
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 500;
        @include font_color("font_color");
        line-height: 36px;
      }
    }
    .he-coupon-center {
      width: 16px;
      position: relative;
      overflow: hidden;
      .he-coupon-doc {
        width: 16px;
        height: 16px;
        position: absolute;
        border: 2px solid transparent;
        border-radius: 50%;
        background: #fdf5e1;
        @include border_color("border_color");
      }
      .he-coupon-doc:first-child {
        top: 0;
        transform: translateY(-50%);
      }
      .he-coupon-doc:nth-child(2) {
        bottom: 0;
        transform: translateY(50%);
      }
      .he-border-line {
        position: absolute;
        height: 132px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 2px;
        background-size: 1px 14px;
        background-repeat: repeat-y;
      }
    }
    .he-coupon-right {
      width: 437px;
      border-top: 2px solid transparent;
      border-right: 2px solid transparent;
      border-bottom: 2px solid transparent;
      border-top-right-radius: 16px;
      border-bottom-right-radius: 16px;
      @include border_color("border_color");
      .he-right-left {
        width: 297px;
        padding: 43px 11px 41px 32px;
        .he-item-name {
          font-size: 30px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #222222;
          line-height: 40px;
          margin-bottom: 4px;
        }
        .he-item-prompt {
          font-size: 22px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
          line-height: 28px;
          margin-top: 4px;
        }
      }
      .he-right-right {
        width: 140px;
        .he-cu-btn {
          width: 126px;
          height: 48px;
          border-radius: 24px;
          font-size: 22px;
          font-family: PingFang SC;
          font-weight: 500;
          padding: 0;
        }
        .he-left-right_btn {
          color: #ffffff;
          @include background_color("background_color");
        }
        .he-right-right_btn {
          border: 1px solid transparent;
          @include font_color("font_color");
          @include border_color("border_color");
          background-color: #ffffff;
        }
      }
    }
  }
}
.cu-btn {
  width: 190px;
  height: 64px;
  border-radius: 32px;
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 500;
  background-color: #ffffff;
}

.cu-btn:first-child {
  border: 1px solid #cccccc;
  color: #222222;
  margin-right: 20px;
}

.cu-btn:last-child {
  border-style: solid;
  border-width: 1px;
  @include font_color("font_color");
  @include border_color("border_color");
  margin-left: 20px;
}

.he-goods-list {
  background-color: #f5f5f5;
  overflow: hidden;
}
</style>